<template>
  <div class="app-container">
    <!-- 条件栏 -->
    <PageFilter
      v-model:query="filterInfo.query"
      :filter-list="filterInfo.list"
    />
    <ModelTips
      :items="modelTipsInfo.items"
      :title="modelTipsInfo.title"
      :brackets="true"
    />
    <!-- 表格 -->
    <TableContainer
      :refresh="tableInfo.refresh"
      :init-curpage="tableInfo.initCurpage"
      v-model:data="tableInfo.data"
      :api="tableInfo.api"
      :tab-index="true"
      :check-box="false"
      v-model:query="filterInfo.query"
      :field-list="tableInfo.fieldList"
      :handle="tableInfo.handle"
      @handleEvent="handleEvent"
      :row-class-name="tableRowClassName"
    >
      <template v-slot:col-businessLicense="scope">
        <p>{{ scope.row.businessLicense }}</p>
        <p>{{ scope.row.businessLicenseWarningTypeValue }}</p>
      </template>
      <template v-slot:col-medicalDeviceLicense="scope">
        <p>{{ scope.row.medicalDeviceLicense }}</p>
        <p>{{ scope.row.medicalDeviceLicenseWarningTypeValue }}</p>
      </template>
      <template v-slot:col-firstMedicalDeviceFiling="scope">
        <p>{{ scope.row.firstMedicalDeviceFiling }}</p>
        <p>{{ scope.row.firstMedicalDeviceFilingWarningTypeValue }}</p>
      </template>
      <template v-slot:col-sanitaryLicense="scope">
        <p>{{ scope.row.sanitaryLicense }}</p>
        <p>{{ scope.row.sanitaryLicenseWarningTypeValue }}</p>
      </template>
    </TableContainer>
  </div>
</template>

<script setup name="brandExpireWarning">
import { brandExpireWarning } from '@/api/warning'
const route = useRoute()
const { proxy } = getCurrentInstance()
//颜色标识
const modelTipsInfo = ref({
  title: '营业执照预警类型',
  items: [
    {
      label: '近效期',
      style: { width: '10px', height: '10px', background: '#fceacb' },
    },
    {
      label: '过期',
      style: { width: '10px', height: '10px', background: '#f5e4e4' },
    },
  ],
})
const listTypeInfo = ref({
  typeList: [],
})
// 过滤相关配置
const filterInfo = ref({
  query: {
    businessLicenseWarningType: '',
    medicalDeviceLicenseWarningType: '',
    firstMedicalDeviceFilingWarningType: '',
    sanitaryLicenseWarningType: '',
  },
  list: [
    {
      label: '厂家',
      value: 'keyword',
      type: 'input',
      event: search,
    },
    {
      label: '营业执照预警类型',
      value: 'businessLicenseWarningType',
      asValue: 'businessLicenseWarningType',
      type: 'select-model',
      code: 'license_expire_warning_type',
      event: search,
      multiple: true,
    },
    {
      label: '医疗器械生产许可过期预警类型',
      value: 'medicalDeviceLicenseWarningType',
      asValue: 'medicalDeviceLicenseWarningType',
      type: 'select-model',
      code: 'license_expire_warning_type',
      event: search,
      multiple: true,
    },
    {
      label: '第一类医疗器械生产备案预警类型',
      value: 'firstMedicalDeviceFilingWarningType',
      asValue: 'firstMedicalDeviceFilingWarningType',
      type: 'select-model',
      code: 'license_expire_warning_type',
      event: search,
      multiple: true,
    },
    {
      label: '生产企业卫生许可证预警类型',
      value: 'sanitaryLicenseWarningType',
      asValue: 'sanitaryLicenseWarningType',
      type: 'select-model',
      code: 'license_expire_warning_type',
      event: search,
      multiple: true,
    },
    { type: 'button', label: '搜索', event: search },
  ],
  // searchBtn: [{ type: "button", label: "搜索", event: search }]
})
// 表格相关
const tableInfo = ref({
  refresh: 1,
  initCurpage: 1,
  api: brandExpireWarning,
  data: [],
  selections: [],
  fieldList: [
    { label: '厂家编码', value: 'code' },
    { label: '厂家名称', value: 'name' },
    {
      label: '营业执照过期日期\n预警状态',
      value: 'businessLicense',
      type: 'slot',
    },
    {
      label: '医疗器械生产许可过期日期\n预警状态',
      value: 'medicalDeviceLicense',
      type: 'slot',
      minWidth: '150px',
    },
    {
      label: '第一类医疗器械生产备案过期日期\n预警状态',
      value: 'firstMedicalDeviceFiling',
      type: 'slot',
      minWidth: '160px',
    },
    {
      label: '生产企业卫生许可证过期日期\n预警状态',
      value: 'sanitaryLicense',
      type: 'slot',
      minWidth: '150px',
    },
  ],
})
const toPage = computed(() => {
  return proxy.$store.state.settings.toPage
})
watch(
  () => route.params,
  (val) => {
    const params = route.params
    const _paramsData = params.paramsData && JSON.parse(params.paramsData)
    if (
      params &&
      params.dataIndex !== undefined &&
      params.dataIndex !== null &&
      route.name === 'brandExpireWarning'
    ) {
      filterInfo.value.query.businessLicenseWarningType = ''
      filterInfo.value.query.medicalDeviceLicenseWarningType = ''
      filterInfo.value.query.firstMedicalDeviceFilingWarningType = ''
      filterInfo.value.query.sanitaryLicenseWarningType = ''
      filterInfo.value.query[_paramsData.type] =
        _paramsData && _paramsData.statusCode
      getList()
    }
  },
  { immediate: true, deep: true }
)
let stopWatch = function() {}
onActivated(() => {
  stopWatch = watch(
    () => toPage.value,
    (val) => {
      if (val) {
        let menus = proxy.$store.state.permission.defaultMenus
        menus.forEach((item) => {
          if (item.children) {
            item.children.forEach((el) => {
              if (el.code === 'brandExpireWarning' && el.url === val.url) {
                if (val.urlType === 1) {
                  filterInfo.value.query = {
                    businessLicenseWarningType: '',
                    medicalDeviceLicenseWarningType: '',
                    firstMedicalDeviceFilingWarningType: '',
                    sanitaryLicenseWarningType: '',
                  }
                  if (val.search && Object.values(val.search).length > 0) {
                    for (let key in val.search) {
                      filterInfo.value.query[key] = val.search[key]
                    }
                  }
                  getList()
                }
                proxy.$store.dispatch('settings/toPage', '')
              }
            })
          }
        })
      }
    },
    {
      deep: true,
      immediate: true,
    }
  )
})
onDeactivated(() => {
  stopWatch()
})

getList()
// 获取列表
function getList() {
  tableInfo.value.refresh = Math.random()
}
// 搜索
function search() {
  // 重置分页
  tableInfo.value.initCurpage = Math.random()
  tableInfo.value.refresh = Math.random()
}

// 触发事件
function handleEvent(event, data) {
  switch (event) {
    case 'tableCheck':
      tableInfo.value.selections = [...data]
      break
  }
}
function tableRowClassName({ row = undefined }) {
  if (
    row.businessLicenseWarningType === 'expire' ||
    row.firstMedicalDeviceFilingWarningType === 'expire' ||
    row.medicalDeviceLicenseWarningType === 'expire' ||
    row.sanitaryLicenseWarningType === 'expire'
  ) {
    return 'expire-row'
  } else if (
    row.businessLicenseWarningType === 'nearly' ||
    row.firstMedicalDeviceFilingWarningType === 'nearly' ||
    row.medicalDeviceLicenseWarningType === 'nearly' ||
    row.sanitaryLicenseWarningType === 'nearly'
  ) {
    return 'nearly-row'
  }
  return ''
}
</script>

<style scoped lang="scss">
:deep(.el-table) .nearly-row {
  background: #fceacb;
}
:deep(.el-table) .expire-row {
  background: #f5e4e4;
}
:deep(el-table__body) tr.hover-row > td {
  background-color: transparent !important;
}
</style>
